<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Traveler Blog -->文章修改</title>
    <link rel="stylesheet" type="text/css" href="/client/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/client/css/main.css"/>
    <link href="/client/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="/client/css/style.css" type="text/css" rel="stylesheet">
    <link type="text/css" href="/client/css/nprogress.css" rel="stylesheet">
    <script src="/client/js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/client/js/jquery-form.js" type="text/javascript"></script>
    <link rel="shortcut icon" href="/client/images/tou.ico">
    <script type="application/javascript">
        function updateArtile() {
            var option = {
                url:"/admin/updateArtile.do",
                type:"post",
                headers:{"ClientCallMode":"ajax"},
                success:function (data) {
                    alert(data.message);
                    if (data.status == 0) {
                        window.location.href="/admin/findAllArtile.do";
                    }
                }
            };
            /*fileform是表单的id*/
            $("#myform").ajaxSubmit(option);
            return false;
        }
    </script>
</head>
<body>
<jsp:include page="/client/head.jsp"/>
<div class="main-wrap">
    <div class="result-wrap">
        <div class="result-content">
            <form action="/admin/updateArtile.do" method="post" id="myform" name="myform" enctype="multipart/form-data">
                <input type="hidden" name="pid" value="${artile.pid}" />
                <table class="insert-tab" width="100%">
                    <tbody>
                    <tr>
                        <th width="120"><i class="require-red">*</i>分类：</th>
                        <td>
                            <select name="tags" class="required">
                                <option name="ptags" >--选择类别--</option>
                                <c:forEach items="${search}" var="search">
                                    <option  value="${search.tags}"
                                             <c:if test="${search.tags != null}">selected</c:if>>${search.tags}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require-red">*</i>标题：</th>
                        <td>
                            <input class="common-text required" id="title" name="title" size="50" value="${artile.title}" type="text">
                        </td>
                    </tr>
                    <tr>
                        <th>作者：</th>
                        <td><input class="common-text" name="author" size="50" value="${artile.author}" type="text"></td>
                    </tr>
                    <tr>
                        <th><i class="require-red">*</i>缩略图：</th>
                        <td><input name="uploadFile" id="uploadFile" type="file"></td>
                        <td><div id="bcd"></div></td>

                    </tr>
                    <tr>
                        <th>内容：</th>
                        <td><textarea name="page" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10">${artile.page}</textarea></td>
                    </tr>
                    <tr>
                        <th></th>
                        <td>
                            <button class="btn btn-primary btn6 mr10" value="提交" type="button" onclick="updateArtile()">提交</button>
                            <input class="btn btn6" onClick="history.go(-1)" value="返回" type="button">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</div>
<script>
    $(function() {
        $("#uploadFile").change(function(e) {
            var imgBox = e.target;
            uploadImg($('#bcd'), imgBox)
        });

        function uploadImg(element, tag) {
            var file = tag.files[0];
            var imgSrc;
            if (!/image\/\w+/.test(file.type)) {
                alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                console.log(this.result);
                imgSrc = this.result;
                var imgs = document.createElement("img");
                $(imgs).attr("src", imgSrc);
                $(imgs).attr("width","120px");
                $(imgs).attr("height","70px");
                element.append(imgs);
            };
        }
    })
</script>
</body>
</html>
